/* eslint-disable max-len */
/* eslint-disable quotes */
/* eslint-disable quote-props */
import React from 'react';

import { observer } from 'mobx-react-lite';
import { Card, Table, Pagination, Dialog, Button, Divider, MenuButton } from '@alifd/next';
import DataForm from './DataForm';
import ExtrProps from './ExtraProps';


import styles from './index.module.scss';
import { useStore } from '@/hooks';

const DataList = observer(({ dictId }) => {
  const { dictItemStore: store } = useStore();
  const [forEdit, setForEdit] = React.useState();
  const [forExtra, setForExtra] = React.useState();
  const handleDelete = (d) => {
    Dialog.confirm({
      title: i18n.t('确认'),
      content: `${i18n.t('确认删除字典项【')}${d.name}${i18n.t('】吗？')}`,
      onOk: () => {
        store.delete(dictId, d.itemId).catch((e) => FAIL(i18n.t('删除失败: ') + e));
      },
    });
  };

  React.useEffect(() => {
    store.fetch(dictId);
  }, []);

  return (
    <Card free className={styles.container}>
      <Card.Content>
        <Table.StickyLock
          dataSource={store.data}
          hasBorder={false}
          // isZebra
          loading={store.loading}
        >
          <Table.Column title={i18n.t('序号')} width={80} cell={(v, i) => store.idx(i)} />
          <Table.Column title={i18n.t('标识')} dataIndex="itemId" align="center" />
          <Table.Column title={i18n.t('名称')} dataIndex="name" align="center" />
          <Table.Column title={i18n.t('排序')} dataIndex="sortWeight" align="center" cell={(v) => v && v.toFixed(2)} />
          <Table.Column title={i18n.t('说明')} dataIndex="description" align="center" />
          <Table.Column
            title={i18n.t('操作')}
            dataIndex="id"
            align="center"
            width={180}
            cell={(v, i, r) => {
              return (
                <div className={styles.tableActions}>
                  <Button text type="primary" onClick={() => setForEdit(r)}>编辑</Button>
                  <Divider direction="ver" />
                  <Button text type="primary" onClick={() => handleDelete(r)}>删除</Button>
                  <Divider direction="ver" />
                  <MenuButton type="primary" popupTriggerType="hover" label="更多" text>
                    <MenuButton.Item onClick={() => setForExtra(r)}>扩展属性</MenuButton.Item>
                  </MenuButton>
                </div>);
            }}
          />
        </Table.StickyLock>
        <Pagination
          style={{ textAlign: "right" }}
          {...PGPROP}
          pageSize={store.pageSize}
          current={store.pageNo}
          total={store.total}
          totalRender={(total) => <span style={{ marginLeft: 12, color: 'var(--pagination-size-selector-title-color, #999999)' }}>{`共 ${total} 条`}</span>}
          pageSizeSelector="dropdown"
          pageSizeList={[10, 20, 50, 100]}
          onPageSizeChange={(size) => store.setSizeList(dictId, size)}
          onChange={(pgNo) => store.setPageNo(dictId, pgNo)}
        />
      </Card.Content>
      <Dialog className="tau-ui-dialog" title={i18n.t('修改字典项')} onClose={() => setForEdit(false)} visible={!!forEdit} footer={false}>
        <DataForm dictId={dictId} editData={forEdit} onSubmit={() => setForEdit(undefined)} onCancel={() => setForEdit(undefined)} />
      </Dialog>
      <Dialog className="tau-ui-dialog" style={{ width: '80%' }} title={i18n.t('扩展属性')} visible={!!forExtra} footer={[<Button key={1} type="primary" onClick={() => setForExtra(undefined)}>{i18n.t('关闭')}</Button>]} onClose={() => setForExtra(undefined)}>
        <ExtrProps item={forExtra} store={store} style={{ maxHeight: 400, overflowY: 'auto' }} />
      </Dialog>
    </Card>
  );
});

export default DataList;
